<template>
  <div>
    <nav-bar title="生活费管理"></nav-bar>
    <div class="maxinBox" v-if="costLiveDetails">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            个人信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="姓名" :value="costLiveDetails.name || '--'"/>
      <van-cell title="班组" :value="costLiveDetails.team || '--'"/>
      <van-cell title="工种" :value="costLiveDetails.workType || '--'"/>
      <van-row>
        <van-col :span="24" class="title">
          <div>
            生活费明细
          </div>
        </van-col>
      </van-row>
      <van-cell title="发放标准" :value="costLiveDetails.standard || '--'"/>
      <van-cell title="本月累计发放" :value="costLiveDetails.cumulative || '--'"/>
      <van-cell title="未付" :value="costLiveDetails.unpaid || '--'"/>
      <van-cell title="最近一次发放" :value="costLiveDetails.recently || '--'"/>
      <van-cell title="发放记录" is-link to="costLiveDetails" />
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        costLiveDetails: {
          name: '何菏',
          team: '木工组',
          workType: '木工',
          standard: '800元',
          cumulative: '2400元',
          unpaid: '600元',
          recently: '2020-11-23'
        }
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
